<!--
 * @Date: 2022-04-20 10:59:48
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-24 15:31:53
 * @FilePath: \weibovue\src\views\blogDetail\index.vue
 * @Description: something
-->
<template>
  <div class="blogDetailbody">
    <div v-if="BlogInfo" class="blogDetailBox">
      <wei-bo-content-card
        :BlogBaseInfo="BlogInfo"
        @getfansAndFollowing="getfansAndFollowing"
      ></wei-bo-content-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import weiBoContentCard from "../../components/weiBoContentCard/index.vue";
import { WeiBoBaseType } from "../../components/weiBoContentCard/types";
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
const BlogInfo = ref<WeiBoBaseType>();
const route = useRoute();
//获取详情
const getBlogDetail = async (blogId: number, userId: number) => {
  let res = await $api.blog.reqBlogDetail(blogId, userId);
  // console.log(res);
  if (res.code == 200) {
    BlogInfo.value = res.data;
    // console.log(BlogInfo.value);
  }
};
const getfansAndFollowing = () => {};
onMounted(() => {
  const { blogId, userId } = route.params;
  getBlogDetail(+blogId, +userId);
});
</script>
<style lang="less" scoped>
.blogDetailbody {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: aqua;
  background: url("../../assets/image/body_bg.jpg");
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;
}
.blogDetailBox {
  top: 10%;
  left: 50%;
  transform: translate(-50%, -10%);
  position: absolute;
  width: 900px;
  // height: 2000px;
  margin: 0 auto;
}
</style>
